var mt,mr,mb,ml;
sliderArr.push('marginSlider');
var marginSlider = function(slider)
{
    mt = slider.render({
        elem: '#mt'  //绑定元素
        ,max:20
        ,step: 1 //步长
        ,showstep: true //开启间隔点
        ,value:0
        ,change: function(value){
            json(0,value)
        }
    });
    
    mr = slider.render({
        elem: '#mr'  //绑定元素
        ,max:20
        ,step: 1 //步长
        ,showstep: true //开启间隔点
        ,value:0
        ,change: function(value){
            json(1,value)
        }
    });
    
    mb = slider.render({
        elem: '#mb'  //绑定元素
        ,max:20
        ,step: 1 //步长
        ,showstep: true //开启间隔点
        ,value:0
        ,change: function(value){
            json(2,value)
        }
    });
    
    ml = slider.render({
        elem: '#ml'  //绑定元素
        ,max:20
        ,step: 1 //步长
        ,showstep: true //开启间隔点
        ,value:0
        ,change: function(value){
            json(3,value)
        }
    });
    
    function json(key,val)
    {
        val = val / 10
        if(key == 0){
            dargObj.css({'margin-top':val+'rem'})
        } else if (key == 1){
            dargObj.css({'margin-right':val+'rem'})
        } else if (key == 2){
            dargObj.css({'margin-bottom':val+'rem'})
        } else if (key == 3){
            dargObj.css({'margin-left':val+'rem'})
        }
        
        var marginJson = dargObj.attr('marginJson').split(' ')
        marginJson[key] = val
        dargObj.attr('marginJson',marginJson.join(' '))
        
        divTop()
    }
}

var marginOff = function(show = '',obj = '')
{
    if(show){
        var str = $(obj).attr('marginJson')
        if(str){
            var strArr = str.split(' ')
            
            mt.setValue(strArr[0])
            mr.setValue(strArr[1])
            mb.setValue(strArr[2])
            ml.setValue(strArr[3])
        }
        $('.marginHtml').show();
    }else{
        $('.marginHtml').hide();
    }

}

